<template>
    <div>
        <el-table
                :data="form.skus"
                style="width: 100%">
            <el-table-column
                    v-for="header in headers"
                    :label="header.text">
                <template slot-scope="scope">
                    <el-input v-if="header.key === 'price'" :value="0"
                              v-model="scope.row.price"></el-input>
                    <el-input v-else-if="header.key === 'stock'" :value="0"
                              v-model="scope.row.stock"></el-input>
                    <el-checkbox v-else-if="header.key === 'enable'"
                              v-model="scope.row.enable"></el-checkbox>
                    <ImageUpload v-else-if="header.key === 'images'"
                                 :images="scope.row.images"></ImageUpload>
                    <span v-else style="margin-left: 10px">{{ scope.row[header.key] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import ImageUpload from "./ImageUpload";
    export default {
        name: "GoodsSave",
        components:{
          ImageUpload
        },
        data(){
          return{
              headers:[] //表格的列头数组
          }
        },
        props:{
            form:{
                type:Object
            }
        },
        mounted() {
            console.log("sku-save");
            console.log(this.form.skuSpecs);
            //筛选出填写了内容的sku
            let specs = this.form.skuSpecs.filter(s => s.selected.length > 0 );
            //reduce对数组进行遍历和合并，total是上次合并的结果 result，current是当前遍历的数据
            let arr = specs.reduce((total,current,index) => {
                let result = [];
                //先遍历原来合并的结果
                total.forEach(o => {
                    //再遍历当前对象的k和selected
                    for(let i = 0;i < current.selected.length;i++){
                        //获得selected中的值
                        let value = current.selected[i];
                        let obj = {};
                        //先将原来合并结果中的每个对象合并到新对象中
                        Object.assign(obj,o);
                        //再添加新的属性
                        obj[current.k] = value;
                        //设置indexes属性 _0_1_1
                        obj.indexes = (o.indexes || '') + '_' + i;
                        //如果遍历到最后一个对象，就去掉indexes前面_
                        if(index === specs.length - 1){
                            obj.indexes = obj.indexes.substring(1);
                            //添加其他属性
                            Object.assign(obj,{stock:0,price:0,images:[],enable:false});
                        }
                        //添加到临时数组
                        result.push(obj);
                    }
                });
                return result;
            },[{}]);
            console.log(arr);
            this.form.skus = arr;
            //获得数组中某个对象的所有的key，添加到headers数组中
            Object.keys(arr[0]).forEach(k => {
                let key = k;
                switch (k) {
                    case "price": key = "价格"; break;
                    case "stock": key = "库存"; break;
                    case "images": key = "图片"; break;
                    case "enable": key = "启用"; break;
                }
                if(k != "indexes"){
                    this.headers.push({text:key,key:k});
                }
            });
            console.log("headers");
            console.log(this.headers);
        }
    }
</script>

<style scoped>

</style>